<div class="layui-fluid" lay-title="个人信息">
    <div class="layui-card">
        <div class="layui-card-header">设置我的资料</div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" lay-filter="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">登录名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginName" lay-verify="required|loginName" autocomplete="off" placeholder="请输入登录名"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload-list" style="margin:0">
                            <img src="/nepadmin/images/profile.jpg" style="width: 120px;height: 120px" id="srcimgurl" class="layui-upload-img">
                            <input type="hidden" id="headLogo" name="headLogo">
                        </div>
                    </div>
                    <div class="layui-input-inline layui-btn-container" style="width: auto;">
                        <button class="layui-btn layui-btn-primary" type="button" id="editimg">修改图片</button >
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                        <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'admin', 'form','upload', 'layer'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , admin = layui.admin
            , upload = layui.upload;
        var sysUser = {};

        form.render(null, 'form-group');

        // 上传图片处理
        var uploadInst = upload.render({
            elem: '#editimg'
            ,url: '/fileUpload'
            ,field: 'myfiles'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#srcimgurl').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != '0'){
                    return layer.msg('上传失败');
                }
                //上传成功,作为上传参数
                console.log(res.data);
                $("#headLogo").val(res.data[0]);
            }
        });

        // 初始化
        admin.get({
            type: 'get',
            url: '/sysUser/info',
            dataType: 'json',
            success: function(data){
                sysUser = data.sysUser;
                if(sysUser){
                    form.val("form-group", {
                        "username": sysUser.userName // "name": "value"
                        ,"phone": sysUser.phone
                        ,"headLogo": sysUser.headLogo
                        ,"loginName":sysUser.loginName
                    });
                    $("#srcimgurl").attr("src",sysUser.headLogo);
                }
            }
        });

        /* 自定义验证规则 */
        form.verify({
            loginName: function (value) {
                if (!verifyLoginName(value)) {
                    return "您输入的登录名已被注册,请重新输入";
                }
            }
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function (data) {
            var field = data.field;
            var userDate={};
            userDate.userName = field.username;
            userDate.headLogo = field.headLogo;
            userDate.loginName = field.loginName;
            userDate.phone = field.phone;
            var url = "/sysUser/update?_method=PUT";
            userDate.id=sysUser.id;
            admin.post({
                url:url,
                contentType: "application/json",
                data:JSON.stringify(userDate),
                success:function(res){
                    if (res.code == 0){
                        // 提醒保存成功，关闭当前弹窗
                        layer.msg(res.msg);
                        layer.closeAll();
                        //刷新
                        table.reload('list-table-user',{
                            url:'/sysUser/page?token='+admin.loginToken,
                            page:{
                                curr:1
                             }
                        })

                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
        
        function verifyLoginName(loginName) {
            var resCode=true;
            admin.get({
                type: 'get',
                async:false,
                url: '/sysUser/checkUnique?userId='+userid+'&loginName='+loginName,
                dataType: 'json',
                success: function(data){
                    if (data.code == 500){
                        resCode=false;
                    }
                },
                error:function(){
                    return false;
                }
            });
            if(!resCode){
                return false;
                //return "您输入的登录名已被注册,请重新输入";
            }
            return true;
        }
    });
</script>